import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import { Button } from 'antd';

class Content11 extends React.PureComponent {
  render() {
    const { ...props } = this.props;
    delete props.dataSource;
    delete props.isMobile;
    
    return (
      <OverPack 
        {...props} 
        className="home-page-wrapper content11-wrapper"
        playScale={0.3}
      >
        <QueueAnim
          type="bottom"
          leaveReverse
          key="page"
          delay={[0, 100]}
          className="title-wrapper"
        >
          <img key="image" src="/images/PiqyziYmvbgAudYfhuBr.svg" className="title-image" alt="title" />
          <div key="title" className="title-h1">
            丰富的特色展台
          </div>
          <div key="content" className="title-content">
            特色展台包括 Ant Design 、AntV、AntG、Egg 等明星产品，更有产品专家
          </div>
          <div key="content2" className="title-content">
            现场问诊，为你答疑解难
          </div>
        </QueueAnim>
        <TweenOne
          key="button"
          style={{ textAlign: 'center' }}
          className=""
          animation={{ y: 30, opacity: 0, type: 'from', delay: 300 }}
        >
          <Button className="button" href="#">
            立即报名
          </Button>
        </TweenOne>
      </OverPack>
    );
  }
}

export default Content11;
